<script setup>
    import { ref } from 'vue'
    import * as T from 'three'
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

    const width = window.innerWidth, height = window.innerHeight;

    //创建场景
    const scene = new T.Scene()

    //创建相机
    const camera = new T.PerspectiveCamera()

    //创建渲染器
    const renderer = new T.WebGLRenderer()
    renderer.setSize(width, height)
    document.body.appendChild(renderer.domElement)


    /****************** 内容部分 ******************/

    //创建坐标
    const axes = new T.AxesHelper(5)
    scene.add(axes)

    //添加轨道控制器
    const control = new OrbitControls(camera, renderer.domElement)
    //开启阻尼惯性
    control.enableDamping = true
    //设置阻尼惯性的系数
    control.dampingFactor = 0.05
    //设置自动旋转
    control.autoRotate = true


    //创建一个几何体
    const geometry = new T.BoxGeometry(1, 1, 1)
    //创建材质、
    const material = new T.MeshBasicMaterial({color: "green"})
    //创建网格
    const cube = new T.Mesh(geometry, material)
    //添加到场景
    scene.add(cube)



    /****************** 内容部分 ******************/


    //设置相机位置
    camera.position.z = 5
    camera.position.x = 2
    camera.position.y = 2

    camera.lookAt(0, 0, 0)

    //渲染
    renderer.render(scene, camera)

    ;(function animate(){
/*        cube.rotation.x += 0.01
        cube.rotation.y += 0.01*/

        renderer.render(scene, camera)

        control.update()

        requestAnimationFrame(animate)
    })()


</script>